<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <el-form-item label="活动名称" prop="title">
            <el-input v-model="form.title" placeholder="请输入任务名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <el-form-item prop="jifen_type" label="积分类型">
            <el-select v-model="form.jifen_type" :disabled="!!form.id" placeholder="请选择积分类型">
              <el-option label="按次数" value="1"></el-option>
              <el-option label="按时长" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <el-form-item label="积分数量" prop="jifen_num">
            <el-input v-model="form.jifen_num" type="number" :disabled="!!form.id" placeholder="请输入积分数量"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <el-form-item label="最大积分" prop="jifen_max">
            <el-input v-model="form.jifen_max" type="number" :disabled="!!form.id" placeholder="请输入最大积分"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <el-form-item label="人数限制" prop="renshu_max">
            <el-input v-model="form.renshu_max" type="number" placeholder="请输入人数限制"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <el-form-item label="开始时间" prop="start_time">
            <el-date-picker
              v-model="form.start_time"
              align="right"
              type="datetime"
              placeholder="请选择开始时间"
              value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <el-form-item label="结束时间" prop="end_time">
            <el-date-picker
              v-model="form.end_time"
              align="right"
              type="datetime"
              placeholder="请选择结束时间"
              value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="24" :lg="24" :xl="24">
            <el-form-item label="备注" prop="content">
              <el-input type="textarea" v-model="form.content" placeholder="请输入备注"></el-input>
            </el-form-item>
        </el-col>
      </el-row>
      <el-form-item class="contacts-add">
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="cancle">关闭</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import * as APIDailycare from '@/api/dailycare'
export default {
  name: 'activity-add',
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      // 显示图标窗口
      dialogVisible: false,
      iconList: [],
      list: [],
      typeList: [],
      form: {},
      // 表单校验
      rules: {
        title: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        jifen_type: [
          { required: true, message: '请选择积分类型', trigger: 'blur' }
        ],
        jifen_num: [
          { required: true, message: '请输入积分数量', trigger: 'change' }
        ],
        jifen_max: [
          { required: true, message: '请输入最大积分', trigger: 'change' }
        ],
        cost_type: [
          { required: true, message: '请选择收费类型', trigger: 'change' }
        ],
        renshu_max: [
          { required: true, message: '请选择人数限制', trigger: 'change' }
        ],
        start_time: [
          { required: true, message: '请选择开始时间', trigger: 'change' }
        ],
        end_time: [
          { required: true, message: '请选择结束时间', trigger: 'change' }
        ]
      }
    }
  },
  mounted () {

  },
  methods: {
    // 添加
    onSubmit () {
      const { id } = this.form
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (id) {
            APIDailycare.riactivityEdit(this.form).then(res => {
              this.$message({ type: "success", message: "编辑成功!"});
              this.cancle()
              this.load()
            })
          } else {
            APIDailycare.riactivityAdd(this.form).then(res => {
              this.$message({ type: "success", message: "新增成功!"});
              this.cancle()
              this.load()
            })
          }
        }
      })
    },
    load () {
      this.$emit('load')
    },
    cancle () {
      this.$refs.form.resetFields()
      this.$emit('cancle')
    }
  },
  watch: {
    data: {
      handler (newval) {
        this.form = newval
      },
      // 可以一进页面就触发监听器  监听器自带的immediate
      immediate: true,
      deep: true
    }
  }
}
</script>

<style lang="scss">
  .el-select{
    width: 100%;
  }
  .el-date-editor.el-input{
    width: 100%;
  }
  .type-add-input {
    textarea {
      font-family: arial;
    }
  }
  .task-form-item {
    height: 33px;
  }
</style>
